<template>
  <div class="main">
    <el-row>
      <el-table
        ref="multipleTable"
        border
        :data="choseList"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
      >
        <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
        <el-table-column label="城市/资源" align="center" width="100">
          <template slot-scope="scope">{{ scope.row.get_medium_public.resources_name }}</template>
        </el-table-column>
        <el-table-column label="广告主" align="center">
          <template slot-scope="scope">{{ scope.row.contract.get_media_up.name }}</template>
        </el-table-column>
        <el-table-column label="播放日期" align="center">
          <template slot-scope="scope">{{ scope.row.contract.cycle_time}}</template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column label="编辑" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteResource(scope.$index,scope.row)">删除</el-button>
            <el-button type="text" @click="edit(scope.$index,scope.row)">编辑</el-button>
          </template>
        </el-table-column>

        <el-table-column label="素材" align="center">
          <!-- <template slot-scope="scope">{{ scope.row.created_at }}</template> -->
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-button type="text" @click="handleAdd">添加资源</el-button>
    </el-row>
    <el-row>
      <div class="buttonBox">
        <el-button type="primary" @click="postAdd">保存</el-button>
       <el-button type="primary" @click="closeModal">返回重选</el-button>
      </div>
    </el-row>
    <el-dialog
      title="添加资源"
      v-if="showAddResource"
      :visible.sync="showAddResource"
      append-to-body
      center
      width="60%"
    >
      <addResource
        @saveResource="saveResource"
        @editSave="editSave"
        :salesObj="salesObj"
        :addObj="addObj"
      ></addResource>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import addResource from "./addResource.vue";
import { Contract_info_List,addScheduling } from "../../../api/Salesman.js";
import formatEveryDay from "../../add_contract/components/timeFormat.js";
export default {
  components: {
    addResource
  },
  props: ["list","time",'ids'],
  data() {
    return {
      choseList: [],
      showAddResource: false,
      addObj: null,
      salesObj: null,
      currentIndex:-1
    };
  },
  watch: {},
  methods: {
    transDate(time) {
      return moment.unix(time).format("YYYY-MM-DD");
    },
    getList() {
      let ids = [];
      this.list.forEach(element => {
        ids.push(element.id);
      });
      Contract_info_List({
        ids: ids
      }).then(res => {
        if (res.code == 200) {
          this.choseList = res.data;
        } else {
          this.$message.error("获取错误!");
        }
      });
    },
    deleteResource(index, row) {
      this.choseList.splice(index, 1);
    },
    handleAdd() {
      this.addObj = null;
      this.salesObj = null;
      this.showAddResource = true;
    },
    saveResource(data) {
      this.showAddResource = false;
      this.choseList.push(data);
    },
    editSave(data) {
          let i = this.currentIndex
          this.choseList[i].remark = data.remark;
          this.choseList[i].often = data.often;
          this.choseList[i].player_date = data.player_date;
          this.choseList[i].get_medium_public.id = data.get_medium_public.id;
          this.choseList[i].get_medium_public.medium_id =
            data.get_medium_public.get_medium.id;
          this.choseList[i].get_medium_public.resources_id =
            data.get_medium_public.get_resource.id;
          this.choseList[i].get_medium_public.program_id =
            data.get_medium_public.get_program.id;
          this.choseList[i].get_medium_public.media_id =
            data.get_medium_public.get_media.id;
            this.choseList[i].contract.get_media_up = data.contract.get_media_up
            this.choseList[i].contract.cycle_time = data.contract.cycle_time
          this.currentIndex = -1

    },
    closeModal(){
      this.$emit('closeMake')
    },
    edit(index, row) {
      this.currentIndex = index
      if (this.addObj) {
        this.addObj = null;
      }
      if (this.salesObj) {
        this.salesObj = null;
      }
      let timeArr;
      if (row.player_date) {
        timeArr = JSON.parse(row.player_date).val;
      }
      let obj;
      if (!row.isAdd) {
        obj = {
          id: row.get_medium_public.id,
          uid: row.id ? row.id : -1,
          remark: row.remark,
          often: row.often,
          player_date: row.player_date
            ? [
                this.transDate(timeArr[0]),
                this.transDate(timeArr[timeArr.length - 1])
              ]
            : [],
          medium_public: {
            //   meijie
            get_medium: {
              id: row.get_medium_public.medium_id
            },
            //   ziyuanleixin
            get_resource: {
              id: row.get_medium_public.resources_id
            },
            //   jiemu
            get_program: {
              id: row.get_medium_public.program_id
            },
            //   pingdao
            get_media: {
              id: row.get_medium_public.media_id
            }
          }
        };
      } else {
        obj = {
          id: row.get_medium_public.id,
          uid: row.id ? row.id : -1,
          remark: row.remark,
          often: row.often,
          player_date: row.player_date
            ? [
                this.transDate(timeArr[0]),
                this.transDate(timeArr[timeArr.length - 1])
              ]
            : [],
          medium_public: {
            //   meijie
            get_medium: row.get_medium_public.get_medium,
            //   ziyuanleixin
            get_resource: row.get_medium_public.get_resource,
            //   jiemu
            get_program: row.get_medium_public.get_program,
            //   pingdao
            get_media: row.get_medium_public.get_media
          }
        };
      }
      let salesObj = row.contract.get_media_up;
      this.addObj = obj;
      this.salesObj = salesObj;
      this.showAddResource = true;
    },
    postAdd(){
      let medium = {
        contact_id: [],
        cycle:JSON.stringify({
        start_time:  moment(this.time[0]).unix(),
        end_time:  moment(this.time[1]).unix()
      }) ,
        resources: []
      }
      this.ids.forEach(p => {
        medium.contact_id.push({
          contact_id: p.id
        });
      });
      this.choseList.forEach((element,i)=>{
         let resources = {
            medium_public_id: "",

            media_up_id: "",

            cycle: "",

            cycle_range: ""
          };

          resources.medium_public_id = element.get_medium_public.id;
          resources.media_up_id = element.contract.get_media_up.id;
          resources.cycle_range = JSON.stringify({
            start_time: moment(element.contract.cycle_time[0]).unix(),
            end_time: moment(element.contract.cycle_time[1]).unix()
          });
          resources.cycle = element.isAdd ? element.player_date : element.get_medium_public.player_date
           medium.resources.push(resources);
      })
      addScheduling({ ...medium }).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.addResource = false
          this.$emit('postSucess')
        }
      });
    }
    
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.buttonBox{
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}
</style>